const { createApp, ref,onMounted } = Vue;

createApp({
    setup() {
        // 响应式数据
        const username = ref('');
        const password = ref('');
        const loading = ref(false);
        const BASE_URL = baseUrl; // 引入 baseUrl
        const rememberMe = ref(false); // 记住我选项

        // 登录方法
        const handleLogin = async () => {
            if (!username.value || !password.value) {
                alert('请输入用户名和密码');
                return;
            }

            loading.value = true;
            try {
                const formData = new URLSearchParams();
                formData.append('username', username.value);
                formData.append('password', password.value);

                const response = await axios({
                    method: 'post',
                    url: BASE_URL + '/user/login',
                    data: formData,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                });

                if (response.data.code === 200) {
                    // 使用 localStorage 存储 token
                    localStorage.setItem('token', response.data.data);

                    // 如果记住我被选中，存储用户名和密码
                    let userData = { username: username.value, password: password.value };
                    if (rememberMe.value) {
                        localStorage.setItem('user', JSON.stringify(userData));
                    } else {
                        localStorage.removeItem('user');
                    }

                    showToast('登录成功，即将跳转', 'success');
                    setTimeout(() => {
                        // 跳转到主页
                        window.location.href = '../../index.html';
                    }, 2000); // 2秒后跳转
                } else {
                    showToast(response.data.message || '登录失败，请重试', 'error');
                }
            } catch (error) {
                console.error('登录错误:', error);
                showToast('登录请求失败，请检查网络连接', 'error');
            } finally {
                loading.value = false;
            }
        };

        const toggleRememberMe = () => {
            rememberMe.value = !rememberMe.value;
        };

        const getUserInfo = () => {
            const storedUser = localStorage.getItem('user');
            if (storedUser) {
                const user = JSON.parse(storedUser);
                username.value = user.username;
                password.value = user.password;
            }
        }



        /// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ Toast相关 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

        //. Toast 状态
        const toast = ref({
            show: false,
            message: '',
            type: 'info'
        });

        //. 存储定时器ID
        let toastTimer = null;

        //. 存储所有活动的弹窗
        const activeToasts = new Set();

        //. 显示 Toast 的函数
        const showToast = (message, type = 'info') => {
            // 创建新的 Toast 元素
            const toast = document.createElement('div');
            toast.className = 'toast';
            toast.classList.add(type);
            toast.textContent = message;

            //. 创建独立的容器
            const container = document.createElement('div');
            container.className = 'toast-container';
            container.appendChild(toast);
            document.body.appendChild(container);

            //. 添加到活动弹窗集合
            activeToasts.add(toast);

            //. 触发重排以启动动画
            toast.offsetHeight;

            //. 设置定时器
            const timer = setTimeout(() => {
                //. 添加消失动画
                toast.style.animation = 'slideUpOut 0.3s ease forwards';

                //. 动画结束后移除元素
                toast.addEventListener('animationend', () => {
                    container.remove();
                    activeToasts.delete(toast);
                });
            }, 3000);

            //. 存储定时器ID
            toast.dataset.timerId = timer;
        };

        /// ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ Toast相关 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

        //. 页面加载时检查 localStorage 中是否有用户信息
        onMounted(() => {
            getUserInfo();
        });

        return {
            username,
            password,
            loading,
            handleLogin,
            toast,
            rememberMe,
            toggleRememberMe
        };
    }
}).mount('#app'); 